/* .类名称：类选择器，页面元素通过class="类名称"套用对应的css样式 */
.mydiv {
  /* border：边框，参数：大小，边框类型，颜色 */
  border: 1px solid #ff0000;
  /* padding：内边距 */
  padding: 0.5rem;
  /* margin：外边距 */
  margin: 0.3rem;
}

/* 去掉浏览器自带的边距 */
body {
  margin: 0px;
}

.flex01 {
  /* 压力盒子会强制将它里面的第一级子元素压迫到一行上 */
  display: flex;
}

.flex02 {
  display: flex;
  /* justify-content:水平轴对齐方式,space-between是分散对齐 */
  justify-content: space-between;
}

.flex03 {
  display: flex;
  /* space-around：将空白部分平均分配在子元素的两侧 */
  justify-content: space-around;
}

.flex04 {
  display: flex;
  /* center:居中，flex-start:默认值，靠左，flex-end：靠右 */
  justify-content: center;
}

.flex05 {
  display: flex;
  /* align-items:交叉轴（垂直）对齐,center:居中,flex-start：靠上,flex-end:靠下 */
  align-items: center;
}

.flex06 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
